<template>
  <div class="login">
    <div class="logo">
      <img src="../assets/logo.jpg" alt="饿了么外卖" />
    </div>
    <!-- 手机号 -->
    <InputGroup
      type="number"
      v-model="phone"
      placeholder="手机号"
      :btnTitle="btnTitle"
      :disabled="disabled"
      :error="errors.phone"
      @btnClick="getVerifyCode"
    />
    <!-- 验证码 -->
    <InputGroup
      type="number"
      v-model="verifyCode"
      placeholder="验证码"
      :error="errors.code"
    />
    <!-- 用户服务协议 -->
    <div class="login_des">
      <p>
        新用户登录即自动注册，表示已同意
        <span>《用户服务协议》</span>
      </p>
    </div>
    <!-- 登录按钮 -->
    <div class="login_btn">
      <button @click="handleLogin" :disabled="isClick">登录</button>
      <button class="directly" @click="directlyLogin">
        跳过验证，直接登录
      </button>
      <p class="tip">
        tip: 目前所用的短信商不支持个人用户了，变得不可用。
        <br />
        整个功能流程都已实现，后期更换接口。
      </p>
    </div>
  </div>
</template>

<script>
import InputGroup from "../components/InputGroup";

export default {
  name: "login",
  components: {
    InputGroup,
  },
  data() {
    return {
      phone: "",
      verifyCode: "",
      // errors给为对象，是因为可能会是手机号错误 / 验证码错误
      errors: {},
      btnTitle: "获取验证码",
      disabled: false,
    };
  },
  computed: {
    isClick() {
      if (!this.phone || !this.verifyCode) return true;
      else return false;
    },
  },
  methods: {
    // 获取验证码
    getVerifyCode() {
      if (this.validatePhone()) {
        // 倒计时
        this.validateBtn();
        // 真实的网络请求
        this.$axios
          .post("/api/posts/sms_back", {
            tpl_id: "136729",
            key: "795be723dd9e88c3ea98e2b6713ab795",
            phone: this.phone,
          })
          .then((res) => {
            console.log("验证码发送成功", res);
          })
          .catch((error) => {
            console.log("验证码发送失败", error);
          });
      }
    },
    validateBtn() {
      let time = 60;
      let timer = setInterval(() => {
        if (time === 0) {
          clearInterval(timer);
          this.btnTitle = `获取验证码`;
          this.disabled = false;
        } else {
          this.btnTitle = `${time}秒后重试`;
          this.disabled = true;
          time--;
        }
      }, 1000);
    },
    validatePhone() {
      // 验证合法的手机号码
      if (!this.phone) {
        this.errors = {
          phone: "手机号不能为空",
        };
        return false;
      } else if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.phone)) {
        // 只要 13/14/15/16/17/18/19 开头即可
        this.errors = {
          phone: "请填写正确的手机号",
        };
        return false;
      } else {
        this.errors = {};
        return true;
      }
    },
    // 正式登录
    handleLogin() {
      if (!this.validatePhone()) {
        alert("请先获取验证码");
        return false;
      }
      // 取消错误提醒
      this.errors = {};
      this.$axios
        .post("/api/post/sms_back", {
          phone: this.phone,
          code: this.verifyCode,
        })
        .then((res) => {
          console.log("登录成功", res);
          // 检验成功 设置登录状态并且跳转到 /
          localStorage.setItem("ele_login", true);
          this.$router.push("/");
        })
        .catch((error) => {
          console.log("登录失败", error);
          // 返回错误信息
          this.errors = {
            code: error.response.data.msg,
          };
        });
    },
    directlyLogin() {
      localStorage.setItem("ele_login", true);
      this.$router.push("/");
    },
  },
};
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  background: #fff;
}

.logo {
  text-align: center;
}

.logo img {
  width: 150px;
}

.text_group,
.login_des,
.login_btn {
  margin-top: 20px;
}
.login_des {
  color: #aaa;
  line-height: 22px;
}
.login_des span {
  color: #4d90fe;
}
.login_btn button {
  width: 100%;
  height: 40px;
  background-color: #48ca38;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  border: none;
  outline: none;
}
.login_btn button[disabled] {
  background-color: #8bda81;
}
.login_btn button.directly {
  margin-top: 20px;
}
.login_btn .tip {
  font-size: 12px;
  color: #aaa;
  padding: 5px;
  text-align: center;
  line-height: 1.4em;
}
</style>
